<template>
  <div>
    <h1>【aty-rate】 component demo</h1>
    <p>【aty-rate】 本质</p>

    <aty-row class="fd-rate-box">
      <aty-row>
        <aty-title level="4">1.【aty-rate】 基础 </aty-title>
        <aty-rate @change="change" />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-rate】 可以选中半星</aty-title>
        <aty-rate allow-half v-model="value" />
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-rate】 显示文字</aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-rate show-text v-model="value2" />
          </aty-col>
          <aty-col span="6">
            <aty-rate show-text v-model="value3" name="value3">
              <aty-text style="color: #f5a623">{{ value3 }}</aty-text>
            </aty-rate>
          </aty-col>
        </aty-row>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-rate】 禁用</aty-title>
        <aty-rate disabled v-model="value4" />
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-rate】 带label, and 绑定事件</aty-title>
        <aty-row>
          <aty-col span="10">
            <aty-rate v-model="rate"
                      name="rate"
                      :count="10"

                      :label="'rate：'"
                      :labelWidth="80"
                      :labelPosition="'right'"
                      prop="rate"
                      @change="change"
                      :min="1" />
          </aty-col>
          <aty-col span="4"> <aty-text style="color: #ff6600">当前选中{{ rate }}星星</aty-text></aty-col>
        </aty-row>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: 2.5,
      value2: 4,
      value3: 1,
      value4: 2,
      rate: 6
    }
  },
  methods: {
    change (value, name) {
      alert('change value:' + value + 'name:' + name)
      // this[name]=value;
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-rate-box {
        margin: 20px;
        text-align: left;
    }
</style>
